<template>
    <div>
        <div class="container">
            <div class="my_analysis">
                <div class="return_button" @click="this.$router.back()">
                    <img src="@/assets/img/返回箭头1.png" width="35" alt="">
                    <p class="return_p">返回</p>
                </div>
                <div class="my_analysis_title">
                    <strong>| </strong>
                    <p>笔迹分析</p>
                    <div>————上传笔迹图片，立刻开始分析</div>
                </div>

                <div class="image_container">
                    <div class="image_title">
                        <div class="my_icon1_div">
                            <i class="el-icon-upload my_icon1"></i>
                            <p class="my_analysis_p1">上传图片</p>
                        </div>
                        <div class="my_icon2_div">
                            <i class="el-icon-date my_icon2"></i>
                            <p class="my_analysis_p2">
                                <el-date-picker v-model="valueDate" type="date" placeholder="选择日期"></el-date-picker>
                            </p>
                        </div>
                        <div class="my_icon3_div">
                            <el-tooltip placement="top">
                                <template #content> 文件大小小于8MB<br/>
                                    照片长宽无限制清<br/>
                                    晰度大于300dpi使<br/>
                                    用A4纸
                                </template>
                                <i class="el-icon-warning-outline my_icon3"></i>
                            </el-tooltip>
                            <p class="my_analysis_p3">图片格式要求</p>
                        </div>
                        <div class="my_icon4_div">
                            <i class="el-icon-folder-add my_icon4" @click="uploadImages()"></i>
                            <p class="my_analysis_p4">点击上传图片</p>
                        </div>
                    </div>
                    <div class="image_content">
                        <div class="original">
                            <transition-group name="fade" ppear tag="div">
                                <el-image
                                        v-for="item in originalUrlList"
                                        v-show="judgeShow(item.value,item.url)"
                                        :key="item.value"
                                        class="my_analysis_image"
                                        style="width: 100px; height: 100px"
                                        :src="item.url"
                                        :preview-src-list="[item.url]"

                                >

                                </el-image>
                            </transition-group>
                        </div>
                        <div class="div_span">
                            <div class="font_span">预处理后</div>
                            <img class="image_span" src="@/assets/img/箭头_向右两次1.png" width="35" alt="">
                        </div>
                        <div class="pretreatment">
                            <transition-group name="fade" ppear tag="div">
                                <el-image
                                        v-for="item in pretreatmentUrlList"
                                        v-show="judgeShow(item.value,item.url)"
                                        :key="item.value"
                                        class="my_analysis_image"
                                        style="width: 100px; height: 100px"
                                        :src="item.url"
                                        :preview-src-list="[item.url]"
                                >
                                </el-image>
                            </transition-group>
                        </div>
                    </div>
                </div>
                <div class="image_footer">
                    <el-button type="info" style="width: 251px" @click="resetData()">重 置</el-button>
                    <el-button class="my_button" style="width: 251px" type="primary" @click="submit()">分 析</el-button>
                </div>
            </div>
            <!--上传头像组件-->
            <div id="image-upload">
                <image-upload field="img"
                              @crop-success="cropSuccess"
                              v-model="imagecropperShow"
                              :width="210"
                              :height="297"
                              :headers="headers"
                              :no-circle="true"
                              :key="imagecropperKey"
                              :noRotate="false"
                              img-format="png">
                </image-upload>
                <!--      <img :src="imgDataUrl">-->
            </div>
        </div>
    </div>

</template>

<script>
    import ImageUpload from 'vue-image-crop-upload'
    import api from '@/api'

    export default {
        name: "Analysis",
        data() {
            return {
                originalUrlList: [
                    {
                        value: 0,
                        url: '',
                    },
                    {
                        value: 1,
                        url: '',
                    },
                    {
                        value: 2,
                        url: '',
                    },
                    {
                        value: 3,
                        url: '',
                    },
                    {
                        value: 4,
                        url: '',
                    },
                    {
                        value: 5,
                        url: '',
                    },

                ],
                pretreatmentUrlList: [
                    {
                        value: 0,
                        url: '',
                    },
                    {
                        value: 1,
                        url: '',
                    },
                    {
                        value: 2,
                        url: '',
                    },
                    {
                        value: 3,
                        url: '',
                    },
                    {
                        value: 4,
                        url: '',
                    },
                    {
                        value: 5,
                        url: '',
                    },

                ],
                valueDate: "",
                //默认预处理算法
                preId: -1,
                //默认分析算法
                anaId: "",
                // 上传弹窗按钮是否显示, 为true时可以弹出上传图片的页面
                imagecropperShow: false,
                // 上传组件唯一值(key值)
                imagecropperKey: 0,
                // 保存按钮是否禁用
                saveBtnDisabled: false,
                // 图片
                headers: {
                    smail: '*_~'
                },
            }
        },
        components: {
            'image-upload': ImageUpload,
        },
        methods: {
            //用于判断是否图片显示
            judgeShow(value, url) {
                if (url !== '') {
                    return true;
                }
                this.originalUrlList[value].url = '';
                this.pretreatmentUrlList[value].url = '';
                return false;

            },
            //提交分析结果
            submit() {
                if (this.valueDate === '') {
                    this.$message.warning("请选择相应日期");
                } else if (this.getNullStringUrl() === 0) {
                    this.$message.warning("请至少一张上传图片");
                } else {
                    let id = JSON.parse(localStorage.getItem("SESSION_KEY_USER")).id;
                    //提交
                    this.$confirm("是否需要立即分析？", "提示", {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: "warning"
                    })
                        .then(() => {
                            //立即分析
                            let n = this.getNullStringUrl();
                            api.submitAnalysisImages(this.originalUrlList,this.pretreatmentUrlList, n, id, 0, this.valueDate, this.preId).then(res => {
                                api.analysisReport(this.pretreatmentUrlList,n, res.data.item, this.anaId).then(res1 => {
                                    this.$message.success("分析成功");
                                    //跳转页面
                                    this.$router.push({name:'AnalysisReport',params: res1.data.item})
                                }).catch(() => {
                                });
                            }).catch(() => {
                            });
                        })
                        .catch(() => {
                        });
                }
            },
            //重置，即全部清空，如图片、日期等
            resetData() {
                this.$confirm("是否需要重置数据？", "提示", {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                })
                    .then(() => {
                        for (let i = 0; i < this.originalUrlList.length; i++) {
                            this.originalUrlList[i].url = '';
                            this.pretreatmentUrlList[i].url = '';
                        }
                        this.valueDate = '';
                        this.$message.success("重置数据成功");
                    })
                    .catch(() => {
                    });
            },
            //上传图片
            uploadImages() {
                for (let i = 0; i < this.originalUrlList.length; i++) {
                    if (this.originalUrlList[i].url === '') {
                        this.imagecropperShow = true;
                        return;
                    }
                }
                this.$message.warning("最大上传文件个数不能超过六个");
            },
            // 裁剪成功后
            cropSuccess(data) {
                //0为默认预处理算法id
                api.getpretreatmentImges(data, this.preId).then(res => {
                    let blob = new Blob([res], {type: "image/png"});
                    let Fr = new FileReader();
                    Fr.readAsDataURL(blob);
                    Fr.onload = (event) => {
                        this.pretreatmentUrlList[this.getNullStringUrl()].url = event.target.result;
                        this.originalUrlList[this.getNullStringUrl()].url = data
                    };
                })
                this.imagecropperShow = false
                this.imagecropperKey = this.imagecropperKey + 1
            },
            getNullStringUrl() {
                for (let i = 0; i < this.originalUrlList.length; i++) {
                    if (this.originalUrlList[i].url === '') {
                        return i;
                    }
                }
            },
            //找默认算法
            getDefaultAlgorithm() {
                api.getDefaultAlgorithm().then(res => {
                  if(res.data != null) {
                    this.preId = res.data.list[0];
                    this.anaId = res.data.list[1];
                    console.log(this.preId)
                    console.log(this.anaId)
                  }

                })
            },
        },
        created() {
            //查找处默认的预处理算法和分析算法id并赋值
            this.getDefaultAlgorithm();

        },
    }
</script>

<style scoped>
    .my_analysis_title {
        margin-left: 150px;
    }

    .return_button {
        /*display: inline-block;*/
        float: left;
        margin-top: 10px;
    }

    .return_button:hover {
        cursor: pointer;
    }

    .return_p {
        vertical-align: 10px;
        font-size: 21px;
        margin-left: 2px;
        display: inline-block;
    }

    .my_analysis > div > strong {
        font-size: 40px;
        color: #01A7F0;
    }

    .my_analysis_title > p {
        display: inline-block;
        font-size: 25px;
        vertical-align: 1px;
        color: #01A7F0;
    }

    .my_analysis_title > div {
        display: inline-block;
        font-size: 15px;
        margin-left: 50px;
    }

    .image_container {
        margin: 20px 150px 50px 150px;
        background: #f5f5f5;
        padding: 30px;
        border: 2px solid #ddd;
        border-radius: 5px;
    }

    .image_title {
        /*text-align: center;*/
    }

    .image_title > div {
        display: inline-block;
    }

    .my_icon1_div {
        float: left;
    }

    .my_icon2_div {
        margin-left: 28%;
    }

    .my_icon3_div {
        vertical-align: -70px;
        text-align: center;
        margin-left: 22%;
    }

    .my_icon4_div {
        float: right;
        text-align: center;
    }

    .my_icon1 {
        color: #FFBF00;
        font-size: 40px;
    }

    .my_icon2 {
        font-size: 30px;
        /*margin-left: 350px;*/
        vertical-align: -30px;
    }

    .my_icon3 {
        /*margin-left: 398px;*/
        /*vertical-align: -20px;*/
    }

    .my_icon4 {
        color: #1f2f3d;
        /*margin-left: 50px;*/
        font-size: 50px;
    }

    .my_icon4:hover {
        cursor: pointer;
    }

    .my_analysis_p1 {
        font-size: 21px;
        vertical-align: 5px;
        margin-left: 8px;
        display: inline-block;
    }

    .my_analysis_p2 {
        vertical-align: -25px;
        margin-left: 6px;
        display: inline-block;
    }

    .my_analysis_p3 {
        display: block;
        /*margin-left: 370px;*/
        /*vertical-align: -20px;*/
        font-size: 12px;
    }

    .my_analysis_p4 {
        font-size: 14px;
    }

    .image_content {
        position: relative;
        /*text-align: center;*/
        margin: 20px auto;
        /*margin-top: 50px;*/
    }

    .image_footer {
        text-align: center;
        margin-bottom: 50px;
    }

    .my_button {
        margin-left: 100px;
    }

    .original {
        display: inline-block;
        margin-top: 50px;
        margin-left: 80px;
        width: 380px;
        height: 251px;
        border: 3px solid #ddd;
        border-radius: 5%;
    }

    .pretreatment {
        display: inline-block;
        margin-left: 200px;
        width: 380px;
        height: 251px;
        border: 3px solid #ddd;
        border-radius: 5%;
    }

    .my_analysis_image {
        margin: 13px;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
        transform: translateY(80px);
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all 0.6s ease;
    }


    /*两个搭配使用，能够实现后续列表渐渐飘上来的效果*/
    .fade-move {
        transition: all 0.6s ease;
    }

    .fade-leave-active {
        position: absolute;
    }

    .div_span {
        display: inline-block;
        position: absolute;
        /*vertical-align: 100px;*/
        top: 160px;
        right: 0;
        bottom: 0;
        left: 510px;
    }

    .font_span {
        display: inline-block;
        font-size: 21px;
        color: #01A7F0;

    }


    .image_span {
        vertical-align: -11px;
    }

</style>